$.fn.extend({
    l_drag: function (options) {
        this.css({
            "position": "absolute",
            "cursor": "move"
        });
        var element = this;
        var parent = element.parent('.drag-box')
        let boxWidth = 0,
            boxHeight = 0,
            sonWidth = 0,
            sonHeight = 0

        window.onload = function () {
            initSize();
        };

        $(window).resize(function () {
            initSize()
        })

        function initSize() {
            boxWidth = parent.width()
            boxHeight = parent.height()
            sonWidth = element.width()
            sonHeight = element.height()
        }
        // 阻止冒泡
        element.find('*').not('img').mousedown(function (e) {
            e.stopPropagation();
        });
        this.mousedown(function (b) {
            const a = $(this);
            var b = event || window.event;
            a.start_pos = {
                x: b.clientX,
                y: b.clientY
            };
            a.css("z-index", 1);
            a.start_pos_box = {
                x: parseInt(a.css("left")),
                y: parseInt(a.css("top"))
            };
            a.sk = {
                x: a.start_pos_box.x + a.start_pos.x,
                y: a.start_pos_box.y + a.start_pos.y
            };

            window.onmousemove = function (c) {
                var c = event || window.event;
                var left = c.clientX - a.start_pos.x + a.start_pos_box.x
                var top = c.clientY - a.start_pos.y + a.start_pos_box.y

                if (left < 0) left = 0
                if (left > (boxWidth - sonWidth)) left = boxWidth - sonWidth
                if (top < 0) top = 0
                if (top > (boxHeight - sonHeight)) top = boxHeight - sonHeight

                a.css({
                    left,
                    top
                })

                // options.dragMove(a.attr('id'), left, top)
            };
            window.onmouseup = function (c) {
                var c = event || window.event;
                a.end_pos_box = {
                    x: parseInt(a.css("left")),
                    y: parseInt(a.css("top"))
                };
                var left = Math.round(a.end_pos_box.x / 10) * 10
                var top = Math.round(a.end_pos_box.y / 10) * 10
                options.dragMove(a.attr('id'), left, top)
                a.css({
                    left,
                    top,
                })
                window.onmousemove = null;
                a.css("z-index", 0)
            }
        });
        return this
    },
    l_zoom: function (options) {
        var fun = options
        this.css("position", "absolute");
        var b = $('<div class="zoom_right"></div><div class="zoom_rb"></div><div class="zoom_bottom"></div>');
        this.append(b);
        $('.zoom_right').css({
            "cursor": "e-resize",
            "width": "5px",
            "height": "100%",
            "top": 0,
            "right": 0,
            "z-index": 1,
            "background-color": "transparent",
            "position": "absolute"
        })
        $('.zoom_rb').css({
            "cursor": "se-resize",
            "width": "5px",
            "height": "5px",
            "right": 0,
            "bottom": 0,
            "z-index": 3,
            "position": "absolute",
            "background-color": "transparent"
        })
        $('.zoom_bottom').css({
            "cursor": "s-resize",
            "width": "100%",
            "height": "5px",
            "position": "absolute",
            "bottom": 0,
            "left": 0,
            " z-index": 1,
            "background-color": "transparent"
        })
        $(".zoom_right").mousedown(function (h) {
            var g = $(this);
            var h = event || window.event;
            h.stopPropagation();
            var f = parseInt(g.parent().css("width"));
            var d = {
                x: h.clientX,
                y: h.clientY
            };
            window.onmousemove = function (i) {
                var i = event || window.event;
                var parent = $(g).parents('.drag-box')
                var boxWidth = parent.width()
                var boxHeight = parent.height()
                if (boxWidth < i.clientX) {
                    g.parent().css("width", f + boxWidth - d.x)
                    var widthx = parseInt(g.parent().css("width"));
                    var heighty = parseInt(g.parent().css("height"))
                } else {
                    g.parent().css("width", f + i.clientX - d.x)
                    var widthx = parseInt(g.parent().css("width"));
                    var heighty = parseInt(g.parent().css("height"))
                }
                // fun.dragWidhtHeight(g.parent().attr('id'), widthx, heighty);
            };
            window.onmouseup = function (i) {
                var i = event || window.event;
                var style_pos_box = {
                    x: parseInt(g.parent().css("width")),
                    y: parseInt(g.parent().css("height"))
                };
                var width = Math.round(style_pos_box.x / 10) * 10
                var height = Math.round(style_pos_box.y / 10) * 10
                fun.dragWidhtHeight(g.parent().attr('id'), width, height)
                g.parent().css({
                    width,
                    height,
                })
                window.onmousemove = null
            }
        });
        $(".zoom_bottom").mousedown(function (h) {
            var f = $(this);
            var h = event || window.event;
            h.stopPropagation();
            var g = parseInt(f.parent().css("height"));
            var d = {
                x: h.clientX,
                y: h.clientY
            };
            window.onmousemove = function (i) {
                var i = event || window.event;
                var parent = $(f).parents('.drag-box')
                var boxWidth = parent.width()
                var boxHeight = parent.height()
                if (boxHeight < i.clientY) {
                    f.parent().css("height", g + boxHeight - d.y)
                    var widthx = parseInt(f.parent().css("width"));
                    var heighty = parseInt(f.parent().css("height"))
                } else {
                    f.parent().css("height", g + i.clientY - d.y)
                    var widthx = parseInt(f.parent().css("width"));
                    var heighty = parseInt(f.parent().css("height"))
                }

                // fun.dragWidhtHeight(f.parent().attr('id'), widthx, heighty)
            };
            window.onmouseup = function (i) {
                var i = event || window.event;
                var style_pos_box = {
                    x: parseInt(f.parent().css("width")),
                    y: parseInt(f.parent().css("height"))
                };
                var width = Math.round(style_pos_box.x / 10) * 10
                var height = Math.round(style_pos_box.y / 10) * 10
                fun.dragWidhtHeight(f.parent().attr('id'), width, height)
                f.parent().css({
                    width,
                    height,
                })
                window.onmousemove = null
            }
        });
        $(".zoom_rb").mousedown(function (i) {
            var g = $(this);
            var i = event || window.event;
            i.stopPropagation();
            var f = parseInt(g.parent().css("width"));
            var h = parseInt(g.parent().css("height"));
            var d = {
                x: i.clientX,
                y: i.clientY
            };
            window.onmousemove = function (l) {
                var l = event || window.event;
                var parent = $(g).parents('.drag-box')
                var boxWidth = parent.width()
                var boxHeight = parent.height()
                if (boxWidth < l.clientX) {
                    g.parent().css({
                        "width": f + boxWidth - d.x
                    });
                    var widthx = parseInt(f + boxWidth - d.x)
                } else {
                    g.parent().css({
                        "width": f + l.clientX - d.x
                    });
                    var widthx = parseInt(f + l.clientX - d.x)
                }
                if (boxHeight < l.clientY) {
                    g.parent().css({
                        "height": h + boxHeight - d.y
                    })
                    var heighty = parseInt(h + boxHeight - d.y)
                } else {
                    g.parent().css("height", h + l.clientY - d.y)
                    var heighty = parseInt(h + boxHeight - d.y)
                }

                if (parseInt(g.parent().css("width")) <= 5) {
                    g.parent().css("width", 5)
                    var widthx = parseInt(5)
                }
                if (parseInt(g.parent().css("height")) <= 5) {
                    g.parent().css("height", 5)
                    var heighty = parseInt(5)
                }
                // fun.dragWidhtHeight('move',g.parent().attr('id'), widthx, heighty)
            };
            window.onmouseup = function (j) {
                var style_pos_box = {
                    x: parseInt(g.parent().css("width")),
                    y: parseInt(g.parent().css("height"))
                };
                var width = Math.round(style_pos_box.x / 10) * 10
                var height = Math.round(style_pos_box.y / 10) * 10
                fun.dragWidhtHeight(g.parent().attr('id'), width, height)
                g.parent().css({
                    width,
                    height,
                })
                var j = event || window.event;
                window.onmousemove = null
            }
        });
        return this
    }
});